<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueComponent</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--关于VueComponent

       VueComponent是构造函数的类，vc是类的不同实例， 类的原型上加的东西，实例vc可以用__proto__访问
    
    vm是Vue构造函数的实例
    vc是VueVueComponent构造函数的实例

    vue实例本身和VueComponent还是有区别的,不同之处是vue可以配置el，可以指示vm那个容器来用，而VueComponent不行只能在Vue.$children下面，更这Vue走
    
    1.组件的本质是一个为VueComponent的构造函数，且不是程序员定义的,是Vue.extend生成的
    在源码中每调用一次vue.extend的函数的返回值就是VueComponent

    2.我们只需要写组件标签，Vue解析时会帮助我们创建组件的实例对象，即Vue帮我们执行的newVueComponent 

   3.特别注意:每次调用Vue.extend，返回的值都是一个全新的VueComponent

   4.关于this指向
          （1）组件配置中
                  data函数。methods中的函数，watch中的函数,computed中的函数，它们的this都是VueComponent实例对象简称vc

          （2）new Vue（option）配置中
                 data函数。methods中的函数，watch中的函数,computed中的函数，它们的this都是Vue实例对象简称vm
    -->

    <div id="root">
        <student></student>


    </div>

</body>


<script>
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: "邓紫棋",
                age: 18
            }
        },
        created() {
            this.showname()

        },

        methods: {
            showname() {
                console.log(this) //this是VueComponent
            }
        }
    })

    //组件student的返回值是：VueComponent
    console.log(student)




    //所有组件都被vm来支配怎么用
    new Vue({
        el: "#root",
        data: {},


        created() {
            this.vos()

        },

        //局部注册组件
        components: {
            student
        },
        methods: {
            vos() {
                console.log(this) //this是vue实例对象
            }
        }
    })
</script>

</html>